<template>
  <div>
    <component :is="nodeType" v-bind="linkProps(nodeTypeStr)">
      <slot></slot>
    </component>
  </div>
</template>

<script>

  //  vue 动态组件component 的使用
  export default {
    name: "dynamicComponent",
    props:{
      nodeTypeStr:{
        type:String
      }
    },
    components: {

    },
    data() {
      return {
        nodeType:""
      }
    },
    computed: {

    },
    created() {

    },
    methods: {
      linkProps(){
        if (this.nodeTypeStr == "el-button"){
            this.nodeType = "el-button"
            return {
              type: "danger"
            }
        }else if (this.nodeTypeStr == "el-input"){
          this.nodeType = "el-input"
          return {
            disabled:true,
            style:{
              width:250+"px"
            },
            placeholder:"请输入"
          }
        }
      }
    }

  }
</script>

<style scoped>

</style>
